import { Component } from 'react'

//antd使用 1.下载 npm i antd 
// 导入组件 当作标签使用
import {Card,Form, Input, Button, Checkbox, message } from 'antd'
//样式
import styles from'./index.module.scss'
//图片
import logoSrc from 'assets/logo.png'
import {loginAPI} from 'api/user'

import {setToken} from '../../utils/storage'
export default class Login extends Component {
    // 使用onFinsh事件获取表单的值
    handleSubmit=async(values)=>{
      console.log('value',values);
      // 发送请求登录
try{
  const res=await loginAPI(values)
console.log('res',res);
//1.跳转
// 编程式导航 通过js操作路由 1.Route组件设置component组件,
// 会自动带上history登props.Route组件内部操作 没有设置Route规则的没有
// history等props
// 2.保存token
// localStorage.setItem('geek-par',res.data.token)
setToken(res.data.token)
this.props.history.push('/')

// 3.成功跳转提示
message.success('跳转成功',1)
}catch(error){
  // 失败的逻辑
  message.warning(error.response.data.message,1)
}

    }
  render() {
    return (
      <div className={styles.login}>
      
    <Card className='login-container'>
    <img src={logoSrc}alt="" className='login-logo'/>
    <Form
      autoComplete="off"
      onFinish={this.handleSubmit}
      //设置初始值,名字严格对应
      initialValues={{mobile:'13811111111',code:'246810',remember:true}}
    >
      <Form.Item
      name='mobile'
       rules={[
        {
          required: true,
          message: '手机号码不能为空!',
        },
        {
          pattern:/^1[3-9]\d{9}$/,
          message:'请输入11位手机号码'
        }
      ]}
      >
        <Input placeholder='请输入手机号码'/>
      </Form.Item>

      <Form.Item
      name='code'
       rules={[
        {
          required: true,
          message: '验证码不能为空!',
        },
        {
          pattern:/^\d{6}$/,
          message:'请输入6位验证码'
        }
      ]}
      >
        <Input placeholder='请输入六位验证'/>
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked"  
      rules={[
        {
        validator:(_,value)=>{
           if(value){
             return Promise.resolve()
           }else{
             return Promise.reject('数据不对')
           }
        }
        }
      ]}>
        <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
      </Form.Item>

      <Form.Item >
        <Button  block  type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
    </Card>
  </div>
      )
  }
}
